* {
    padding: 0;
    margin: 0;
}

/* 第一屏 */
.first .text{
    width: 100%;
    height: 50px;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;

} 
.first .text span {
    color: rgba(255, 255, 255, .8);
    font-size: 100px;
    margin: 30px 100px;
    opacity: .3;
    transition: margin 1s,opacity 1s,font-size 1s;
    transition-timing-function: linear;
}
.first .logo {
    background: url(../img/360Logo.png);
    width: 250px;
    height: 250px;
    margin: 0 auto; 
}
.first .adv {
    width: 817px;
    height: 40px;
    margin: 100px auto;
}
.first .adv span {
    color: rgba(255, 255, 255, .8);
    font-size: 40px;
    margin: 0 40px;
}
/* 动画 */
.first.current .text span {
    margin: 30px 0px;
    opacity: 1;
    font-size: 80px;
}
/* 第二屏幕 */
.second {
    display: flex;
    justify-content: space-around;

}
/* 图片 */
.pictures {
    width: 333px;
    height: 480px;
    position: relative;
    flex: 1;
    margin: 0 0;
}
.pictures  div {
    transition: transform 1s;
}
.pictures div {
    width: 111px;
    height: 160px;
    position: absolute;
}
.pictures div:nth-of-type(1) {
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: 0px 0px;
    transform: translate(100px,100px) rotate(30deg);
}
.pictures div:nth-of-type(2) {
    left: 111px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -111px 0px;
    transform: translate(-100px,-100px) rotate(50deg);

}
.pictures div:nth-of-type(3) {
    left: 222px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -220px 0px;
    transform: translate(200px,200px) rotate(-30deg);

}
.pictures div:nth-of-type(4) {
    /* left: 100px; */
    top: 160px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: 0px -160px;
    transform: translate(-200px,-200px) rotate(-50deg);

}
.pictures div:nth-of-type(5) {
    left: 111px;
    top: 160px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -111px -160px;
    transform: translate(250px,250px) rotate(-60deg);

}
.pictures div:nth-of-type(6) {
    left: 222px;
    top: 160px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -222px -160px;
    transform: translate(-250px,-250px) rotate(60deg);
}
.pictures div:nth-of-type(7) {
    /* left: 100px; */
    top: 320px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -0px -320px;
    transform: translate(-150px,-150px) rotate(40deg);
}
.pictures div:nth-of-type(8) {
    left: 111px;
    top: 320px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -111px -320px;
    transform-origin: left;
    transform: translate(150px,150px) rotate(-40deg);
}
.pictures div:nth-of-type(9) {
    left: 222px;
    top: 320px;
    background: url("../img/2b_reconnect.jpeg") no-repeat;
    background-position: -222px -320px;
    transform-origin: left top;
    transform: translate(300px,300px) rotate(10deg);
}
.second.current .pictures div {
    transform: none;
}
/* 文字内容介绍 */
.second .content {
    flex: 1;
}
.second .content .text1 {
    font-size: 4em;
    color: rgba(255, 255, 255, 1);
}
.second .content .text2 {
    font-size: 4em;
    color: rgba(255, 255, 255, 1);
}
.second .content .adv1 {
    font-size: 2ex;
    color: rgba(255, 255, 255, .8)
}
.second .content .adv2 {
    font-size: 2ex;
    color: rgba(255, 255, 255, .8)
}